<!DOCTYPE>
<html>
	<head>
		<title>scrollTo</title>
		<style type="text/css">
			p { 
				height: 500px;
				width: 500px;
				border: 1px solid #ccc;
				padding: 20px;
			}
			a {
				display: block;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$.fn.scrollTo = function (speed) {
				var container, offset, target;
				target = this;
				container = 'html,body';
				offset = $(target).offset().top - 30;
				$(container).animate({
					"scrollTop": offset
				}, speed || 1000);
				return this;
			};

			$(document).ready(function() {
				$(".toP1").click(function() {
					$('.p1').scrollTo(1000);
				});
				$(".toP2").click(function() {
					$('.p2').scrollTo(500);
				});
				$(".toP3").click(function() {
					$('.p3').scrollTo(1);
				});
			});
		</script>
	</head>
	<body>
					
		<p class="p1">
			p1	
			<a href="###" class="toP1">scrollTo p1(speed = 1000)</a>			
			<a href="###" class="toP2">scrollTo p2(speed = 500)</a>	
			<a href="###" class="toP3">scrollTo p3(speed = 1)</a>
		</p>
		<p class="p2">
			p2
			<a href="###" class="toP1">scrollTo p1(speed = 1000)</a>			
			<a href="###" class="toP2">scrollTo p2(speed = 500)</a>	
			<a href="###" class="toP3">scrollTo p3(speed = 1)</a>
		</p>
		<p class="p3">
			p3
			<a href="###" class="toP1">scrollTo p1(speed = 1000)</a>			
			<a href="###" class="toP2">scrollTo p2(speed = 500)</a>	
			<a href="###" class="toP3">scrollTo p3(speed = 1)</a>
		</p>
		
	</body>
</html>

